import React,{Component} from 'react';
import { Menu} from 'antd';
import './menu.less';
import debounce from 'lodash/debounce';
import Velocity from 'velocity-animate';
import PropTypes from 'prop-types';
const { SubMenu } = Menu;
const prefix = 'huimei-menu';
const menuStyle = {
    width:'275px',
    border:"1px solid #dfe0e1",
    marginRight:"30px"
};
const itemStyle = {
    fontSize: "14px"
}
class Sider extends Component {
    constructor(props){
        super(props);
        this.state = {
            mode: 'inline',
            contentIndex:props.defaultActiveKey,
            marginTop:0,
            scrollTop:0,
            scroll:0
        }
    }
    onSelect = (item) =>{
        this.setState({
            contentIndex:item.key
        });
    };
    handleClick = () =>{
        if(this.container) {
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
            let select = document.querySelector(`div.${prefix}-content`);
            let listLength = document.querySelector('div#menuList').offsetHeight;
            let judgment = (select.offsetHeight - listLength) > 0 ? (select.offsetHeight - listLength) : 0;//判断菜单栏滚动的最大距离
            this.setState((prevState) => ({
                marginTop: scrollTop > 300 ? (scrollTop - 170) : 0,  //尽量使菜单一直在页面中间显示
                scroll: scrollTop - prevState.marginTop
            }), () => {
                let state = this.state;
                Velocity(document.getElementById("menuList"), {marginTop: (state.marginTop < judgment ? (state.marginTop) : judgment)}, {
                    duration: 500
                })
            })
        }
    };
    scrollTop = () =>{
        Velocity(document.body,"scroll",{duration:0})
    };
    componentDidMount() {
        window.addEventListener('scroll', debounce(this.handleClick,200 ));
    }

    componentWillUnmount(){
        window.removeEventListener('scroll', this.handleClick);
    }
    render() {
        let {contentIndex} = this.state;
        let {listSource,contentSource,defaultActiveKey} = this.props;
        let MenuEle = listSource.map((value,index)=>{
            if(value.children){
                return(
                    <SubMenu key={value.key} title={<span><span className={prefix+'-sub-menu'}>{value.title}</span></span>}>
                        {value.children.map((content,key)=>{
                            return(
                                <Menu.Item key={content.key} className={prefix+'-menu-title'} style={itemStyle}>{content.value}</Menu.Item>
                            )
                        })}
                    </SubMenu>
                )
            }else{
                return(
                    <Menu.Item key={value.key} className={prefix+'-menu-title'}>
                        {value.title}
                    </Menu.Item>
                )
            }
        });
        return (
            <div className={prefix+'-container clearfix'} ref={(content) => {this.container = content}}>
                <div className={prefix} id="menuList">
                    <Menu
                        style={menuStyle}
                        defaultSelectedKeys={[defaultActiveKey]}
                        mode={this.state.mode}
                        onSelect = {this.onSelect}
                        onClick = {this.scrollTop}
                    >
                        {MenuEle}
                    </Menu>
                </div>
                <div className={prefix+"-content"}>
                    {contentSource[contentIndex]}
                </div>
            </div>
        );
    }
};
export default Sider;
Sider.propTypes = {
  listSource:PropTypes.array.isRequired,
  contentSource:PropTypes.array.isRequired,
  defaultActiveKey:PropTypes.string.isRequired
};